import React, {useEffect, useState} from 'react';
import {
    Button,
    Dimensions,
    FlatList,
    Image,
    SafeAreaView, ScrollView,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
} from 'react-native';
import {DOMAIN_URL, noticeList} from "../util/api";
import {useNavigation} from "@react-navigation/native";
import {PAGENAME} from '../util/PageName';
import {style} from "../theme";
import AsyncStorage from "@react-native-async-storage/async-storage";

const {width, height} = Dimensions.get('screen');

const DATA = [
    {
        id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
        title: 'First Item',
    },
    {
        id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
        title: 'Second Item',
    },
    {
        id: '58694a0f-3da1-471f-bd96-145571e29d72',
        title: 'Third Item',
    },
];

const NoticeScreen = (props: { navigation: any }) => {

    const [selectedId, setSelectedId] = useState(null);
    const [noticeItemList, setNoticeItemList] = useState([]);
    const navigation = useNavigation();
    const [isAdmin, setIsAdmin] = useState(false);
    // const {navigation} = this.props;
    console.log(props);
    useEffect(() => {
        const unsubscribe = navigation.addListener(
            'focus',
            payload => {
                getNoticeList();
            }
        );
        return () => {
            unsubscribe();
        };
    }, [navigation]);

    AsyncStorage.getItem('isAdmin').then(value => {
        console.log('this.state.isAdmin', value);
        setIsAdmin(value == 'true' ? true : false)
    });

    const getNoticeList = () => {
        // 这里是你想要在A页面被重新聚焦时执行的方法
        //当页面重新获得焦点时，执行这个方法
        noticeList(null).then((res) => {
            setNoticeItemList(res.rows);
        });
    };
    const renderItem = ({item}) => {
        // const backgroundColor = item.id === selectedId ? '#6e3b6e' : '#f9c2ff';

        return (
            <Item
                item={item}
                onPress={() => setSelectedId(item.id)}
                // style={{backgroundColor}}
            />
        );
    };

    const Item = ({item, onPress, style}) => (
        <TouchableOpacity
            onPress={() => {
                console.log('Pressed');
                props.navigation.push(PAGENAME.NOTICE_DETAIL, {item: item});
            }}
            style={{flexDirection: 'row', alignItems: 'center'}}>
            <View style={styles.indexDataRow} key={'event:' + item}>

                <View style={{marginLeft: 4, justifyContent: 'space-between'}}>
                    <Text

                        numberOfLines={1}
                        ellipsizeMode={'tail'}>
                        {item.noticecontent}
                    </Text>
                    <Text>{item.createtime}</Text>
                </View>

            </View>
        </TouchableOpacity>
    );
    const listHeader = ({item}) => {
        return (
            <View
                style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    marginVertical: 8,
                    marginHorizontal: 8
                }}>
                <Text style={styles.title}></Text>
                <View>
                    <TouchableOpacity onPress={() => {
                        props.navigation.push(PAGENAME.NOTICE_ADD);
                    }}>
                        <Image source={require('../assets/images/icon/add.png')} style={style.buttonIcon}/>
                    </TouchableOpacity>
                </View>

            </View>
        );
    };

    return (

        <SafeAreaView style={styles.container}>
            <FlatList
                data={noticeItemList}
                renderItem={renderItem}
                // ListHeaderComponent={listHeader}
                // ListFooterComponent={listHeader}
                keyExtractor={item => item.id}
                extraData={selectedId}
            />

            <View
                style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    marginVertical: 8,
                    marginHorizontal: 8,
                    zIndex: 999,
                }}>
                <Text style={styles.title}></Text>

                {isAdmin && (
                    <View>
                        <TouchableOpacity onPress={() => {
                            props.navigation.push(PAGENAME.NOTICE_ADD);
                        }}>
                            <Image source={require('../assets/images/icon/add.png')} style={style.buttonIcon}/>
                        </TouchableOpacity>
                    </View>
                )}

            </View>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        // marginTop: StatusBar.currentHeight || 0,
        marginHorizontal: 8,
        marginTop: 20,
    },
    // item: {
    //   padding: 20,
    //   marginVertical: 8,
    //   marginHorizontal: 16,
    // },
    title: {
        fontFamily: 'KaiTi',
        fontSize: 20,
        fontWeight: 'bold',
        marginVertical: 8,
    },
    indexDataRow: {
        marginBottom: 8,
        flexDirection: 'row',
        borderStyle: 'solid',
        borderColor: '#000',
        borderWidth: 1,
        borderRadius: 4,
        padding: 8,
        backgroundColor: '#fff',
        justifyContent: 'space-between',
        alignItems: 'center',
        width: width - 16,
        height: 48,

    },
});

export default NoticeScreen;
